<template>
  <div class="app-container">
        <el-form
          ref="editSalesPlan"
          :rules="rules"
          :model="editSalesPlan"
          label-position="top"
          class="addTictStyle"
          size="small"
        >
          <el-row :gutter="24">
            <el-col :span="16" :offset="5">
              <el-form-item label="票务名称 :" prop="tictName">
                <el-select
                  v-model="addtictName"
                  filterable
                  placeholder="请选择票务信息"
                  @change="getTictValue"
                  style="width:100%"
                >
                  <el-option
                    v-for="item in tictData"
                    :key="item.uuid"
                    :label="item.name"
                    :value="item.name"
                  >
                    {{ item.name }}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="16" :offset="5">
              <el-form-item label="播出日期">
                <el-date-picker
                  v-model="allShowTime"
                  filterable
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="timestamp"
                  size="small"
                  :picker-options="pickerOptions"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="16" :offset="5">
              <el-row :span="24" v-for="(item,index) in editSalesPlan.broadcastList"  :key="index" @deleteIndex="del">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>播出场次{{index+1}}</span>
                    <el-button style="font-size:14px;color: #3370FF;float: right; padding: 3px 0"    @click="del(index)" >删除</el-button>
                  </div>
                  <el-form-item label="播出场次">
                    <el-input v-model="item.name" placeholder="场次名称(选填)"  />
                  </el-form-item>
                  <el-form-item label="开始时间:" prop="boradsDate">
                    <el-date-picker
                      v-model="item.startTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      style="width:100%"
                      :picker-options="pickerStartOptions"
                      @change="recordStartTimeValue(item.startTime)">

                    </el-date-picker>

                  </el-form-item>
                  <el-form-item label="结束时间">
                    <el-date-picker
                      v-model="item.endTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      :picker-options="pickerEndOptions"
                      style="width:100%">
                    </el-date-picker>
                  </el-form-item>
                </el-card>
              </el-row>
              <el-button type="primary"  @click="addItem"  style="background-color:#F8F9FA;color:#171717;width:100%;border-color:#E1E3E6" >新增场次</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="16" :offset="5">
              <el-form-item label="团队购票" prop="teamCumstoer">
                <el-col :span="4">
                  <el-select
                    v-model="editSalesPlan.teamCumstoer"
                    filterable
                    placeholder="请选择团队购票"
                    @change="openDiscount"
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in teamCumstoerOption"
                      :key="item.code"
                      :label="item.name"
                      :value="item.name"
                    >
                      {{ item.name }}
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="20">
                  <el-input v-if="define" type="number" v-model="editSalesPlan.teamDefine" placeholder="请输入限定人数" />
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="16" :offset="5">
              <el-form-item label="售票价格:">
                <el-row v-for="(stallItems,index) in editSalesPlan.stallItems"  :key="'str'+index" @deleteIndex="delStallItems">
                  <el-card class="box-card" >
                    <div slot="header" class="clearfix">
                      <span>票档{{index+1}}</span>
                      <el-button  style="font-size:14px;color: #3370FF;float: right; padding: 3px 0"  @click="delStallItems(index)" >删除</el-button>
                    </div>
                    <el-form-item label="票档名称">
                      <el-input v-model="stallItems.name" placeholder="请输入票档名称" />
                    </el-form-item>
                    <el-form-item label="票档颜色值">
                      <el-input v-model="stallItems.takeColor" readonly="readonly" placeholder="请选择颜色" ></el-input>
                      <el-color-picker v-model="stallItems.takeColor"  style="position: absolute;left: 97%;"></el-color-picker>
                    </el-form-item>
                    <el-form-item label="票档价格">
                      <el-input v-model="stallItems.stallPrice" placeholder="请输入票档价格" ></el-input>
                    </el-form-item>
                  </el-card>
                </el-row>
              </el-form-item>

              <el-button type="primary" @click="addStallItems"  style="background-color:#F8F9FA;color:#171717;width:100%;border-color:#E1E3E6" >新增票务</el-button>
            </el-col>
          </el-row>
          <el-row :span="24">
            <el-col :span="16" :offset="5">
              <el-form-item label="售卖开始">
                <el-col :span="1">
                <span>在场次</span>
                </el-col>
                <el-col :span="8">
                  <el-select v-model="editSalesPlan.startType"  style="width:100%">
                    <el-option
                      v-for="sellEnd in sellEndOption"
                      :key="sellEnd.code"
                      :label="sellEnd.name"
                      :value="sellEnd.code"
                    >
                      {{ sellEnd.name }}
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-input v-model="editSalesPlan.sellTime" type="number" ></el-input>
                </el-col>
                <el-col :span="7">
                  <el-select v-model="editSalesPlan.sellDateUnit"  style="width:100%">
                    <el-option
                      v-for="sellUnit in sellDateUnitOption"
                      :key="sellUnit.code"
                      :label="sellUnit.name"
                      :value="sellUnit.code"
                    >
                      {{ sellUnit.name }}
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-footer height="80px">
            <el-row style="display: flex;justify-content: center;align-items: center;">
              <el-button @click="submit" type="primary">
                保存
              </el-button>
              <el-button @click="editOut">
                取消
              </el-button>
            </el-row>
          </el-footer>
<!--            <el-col :span="20">-->
<!--              <el-form-item label="票务信息 :" prop="tictName">-->
<!--                <el-select-->
<!--                  v-model="editSalesPlan.tictName"-->
<!--                  filterable-->
<!--                  placeholder="请选择票务信息"-->
<!--                  style="width: 100%;"-->
<!--                  @change="getTictValue"-->
<!--                >-->
<!--                  <el-option-->
<!--                    v-for="item in tictData"-->
<!--                    :key="item.code"-->
<!--                    :label="item.name"-->
<!--                    :value="item.name"-->
<!--                  >-->
<!--                    {{ item.name }}-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <el-form-item label="票面名称 :" prop="salName">-->
<!--                <el-input v-model="editSalesPlan.salName" placeholder="请输入票面名称" />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <el-form-item label="售票计划代码 :" prop="code">-->
<!--                <el-input v-model="editSalesPlan.code" placeholder="请输入售票计划代码" />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <el-form-item label="售票信息 :" prop="info">-->
<!--                <el-input v-model="editSalesPlan.info" placeholder="请输入售票信息" />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <el-form-item label="票面计费类型 :" prop="salTp">-->
<!--                <el-select v-model="editSalesPlan.salTp" filterable placeholder="请选择票面计费类型" style="width: 100%;">-->
<!--                  <el-option-->
<!--                    v-for="item in tckSaltpOptions"-->
<!--                    :key="item.code"-->
<!--                    :label="item.name"-->
<!--                    :value="item.name"-->
<!--                  >-->
<!--                    {{ item.name }}-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <el-form-item label="预订天数(天) :" prop="reseDays">-->
<!--                <el-input v-model="editSalesPlan.reseDays" placeholder="请输入预订天数" />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <el-form-item label="发售时间 : " prop="startTime">-->
<!--                <el-date-picker-->
<!--                  v-model="editSalesPlan.startTime"-->
<!--                  type="date"-->
<!--                  placeholder="请选择发售时间"-->
<!--                  value-format=" yyyy-MM-dd"-->
<!--                  style="width:100%"-->
<!--                />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <el-form-item label="结束时间 :" prop="endTime">-->
<!--                <el-date-picker-->
<!--                  v-model="editSalesPlan.endTime"-->
<!--                  type="date"-->
<!--                  placeholder="请选择结束时间"-->
<!--                  value-format=" yyyy-MM-dd"-->
<!--                  style="width:100%"-->
<!--                />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <el-form-item label="播出场次" prop="boradsTimes">-->
<!--                <el-time-picker-->
<!--                  v-model="editSalesPlan.boradsTimes"-->
<!--                  is-range-->
<!--                  range-separator="至"-->
<!--                  start-placeholder="开始时间"-->
<!--                  end-placeholder="结束时间"-->
<!--                  placeholder="选择时间范围"-->
<!--                />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <el-form-item label="团队购票折扣 ： " prop="teamCumstoer">-->
<!--                <el-input v-model="editSalesPlan.teamCumstoer" placeholder="请输入折扣">折</el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <el-form-item label="团队限定人数 ： " prop="definePeoples">-->
<!--                <el-input v-model="editSalesPlan.definePeoples" placeholder="请输入限定人数" />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <el-form-item label="日发售数量(张) :" prop="dayNum">-->
<!--                <el-input v-model="editSalesPlan.dayNum" placeholder="请输入日发售数量" />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="20">-->
<!--              <el-form-item label="售票价格(元) :" prop="price">-->
<!--                <el-input v-model="editSalesPlan.price" placeholder="请输入售票价格" />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
        </el-form>
  </div>
</template>

<script>
import { replaceSpacesObj } from '../../../utils/webUtils.js'
import editSalanImg from './editSalanImg.vue'

export default {
  name: 'EditTict',
  components: { editSalanImg },
  props: {
    salesPlanUuid: {
      type: String
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          // 如果函数处理比较简单,可以直接在这里写逻辑方法
          // return time.getTime() < Date.now() - 8.64e7

          // 如果函数里处理的数据比较麻烦,也可以单独放在一个函数里,避免data数据太臃肿
          return this.dealDisabledDate(time)
        },
      },
      pickerStartOptions:{
        disabledDate:(time) => {
          return this.detailStartDate(time)
        },
      },
      pickerEndOptions:{
        disabledDate:(time) =>{
          return this.detailEndDate(time)
        },
      },
      recordStartTime:'',
      uuid: this.salesPlanUuid,
      editSalesPlan: {
        code: '',
        tictName: '',
        tictCode: '',
        info: '',
        salTp: '',
        salName: '',
        merchUuid: '',
        merchName: '',
        yardName: '',
        yardCode: '',
        reseDays: '',
        startTime: '',
        endTime: '',
        dayNum: '',
        price: '',
        imgStr: '',
        boradsTimes: '',
        teamCumstoer: '',
        definePeoples: '',
        sellTime:'',
        startShowTime:'',
        endShowTime:'',
        sellDateUnit:'',
        startType:'',
        sellStart:'',
        teamDefine:'',
        broadcastList: [{'name':'','showTime':''}],
        stallItems: [{'name':'','takeColor':'#ff0000','color':'#ff0000','stallPrice':''}],
        sellDateUnit:'',
      },
      addtictName:'',
      allShowTime:[],
      sellEndOption:[],
      define:false,
      sellDateUnitOption:[],
      teamCumstoerOption:[],
      validOptions: {},
      tckSaltpOptions: [],
      merchants: { name: '', uuid: '' },
      rules: {
        salName: [
          { required: true, message: '票面名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '售票计划代码不能为空', trigger: 'blur' }
        ]
      },
      info: '',
      infoShow: false,
      tictData: [],
      editBoxShow: false,
      editShow: false,
      tictObj: {}
    }
  },
  // 深度监听父组件的props传值
  watch: {
    salesPlanUuid(val) {
      this.uuid = val
      this.querySalesPlan()
    }
  },
  mounted() {
    this.uuid=this.$route.params.uuid
    console.log("uuid="+this.uuid)
    this.queryTict()
    this.queryTckSaltp()
    this.querySalesPlan()
    this.queryTeamCus()
    this.querySell()
    this.queryUnit()
  },
  methods: {
    //播出日期时间控制
    dealDisabledDate (time) {
      return time.getTime() <= Date.now()- 8.64e7

      // 这里减8.64e7的作用是,让今天的日期可以选择,如果不减的话,今天的日期就不可以选择,判断中写<= 也是没用的,一天的毫秒数就是8.64e7
      // return time.getTime() <= Date.now()
      // return time.getTime() < Date.now() - 8.64e7
    },
    //播出场次开始键日期控制
    detailStartDate(time){
      if(time.getTime()<this.allShowTime[0]||time.getTime()>this.allShowTime[1]){
        return  true
      }
    },
    //播出场次结束时间日期控制
    detailEndDate(time){
      if(time.getTime()<this.allShowTime[0]||time.getTime()>this.allShowTime[1]||this.recordStartTime>time.getTime()){
        return  true
      }
    },
    recordStartTimeValue(val){
      this.recordStartTime=val
    },
    //根据代码获取单位
    queryUnit(){
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/SALE_UNIT',
          params: {}
        })
        .then(response => {
          this.sellDateUnitOption = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },
    //根据代码获取售卖场次
    querySell(){
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/SALE_SELL',
          params: {}
        })
        .then(response => {
          this.sellEndOption = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 根据代码获取团队折扣
    queryTeamCus() {
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/TEAM_CUS',
          params: {}
        })
        .then(response => {
          this.teamCumstoerOption = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },

    openDiscount() {
      this.define = true
    },
    addStallItems() {
      var params = {}
      params.name = ''
      params.takeColor = ''
      params.stallPrice=''
      this.editSalesPlan.stallItems.push(params)
    },
    delStallItems(index) {
      this.editSalesPlan.stallItems.splice(index, 1)
    },
    addItem() {
      var params = {}
      params.name = ''
      params.showTime = ''
      this.editSalesPlan.broadcastList.push(params)
    },
    del(index) {
      debugger
      this.editSalesPlan.broadcastList.splice(index, 1)
    },
    imgState(msg) {
      this.editBoxShow = msg
      this.editShow = msg
      // this.queryTict();
    },
    // 查询商户下所有票务信息
    queryTict() {
      this.axios
        .request({
          method: 'get',
          url: './ope/kdi/merch/search/findByUser',
          params: {}
        })
        .then(response => {
          // this.merchants = response.data[0]
          this.axios.request({
            method: 'get',
            url: './tck/kdi/tict/search/findByMerch',
            params: { merchUuid: this.merchants.uuid }
          }).then(response => {
            this.tictData = response.data.data
          }).catch(error => {
            console.log(error)
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 根据代码获取售票类型
    queryTckSaltp() {
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/TCK_SALTP',
          params: {}
        })
        .then(response => {
          this.tckSaltpOptions = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },
    getTictValue() {
      this.tictData.forEach(list => {
        if (list.name === this.addtictName) {
          this.editSalesPlan.tictCode = list.uuid
        }
      })
    },
    // 通过uuid查询当前对象信息
    querySalesPlan() {
      this.axios.request({
        method: 'get',
        url: './tck/plan/ticketing-plan/' + this.uuid,
        headers: {},
        params: {}
      }).then(response => {
        this.insertSalesPlan(response.data.data)
      }).catch(error => {
        console.log(error)
      })
    },
    insertSalesPlan(salesPlan) {
      this.editSalesPlan.code = salesPlan.code
      this.addtictName = salesPlan.tictName
      this.editSalesPlan.tictCode = salesPlan.tictCode
      this.editSalesPlan.info = salesPlan.info
      this.editSalesPlan.salTp = salesPlan.salTp
      this.editSalesPlan.salName = salesPlan.salName
      this.editSalesPlan.merchUuid = salesPlan.merchUuid
      this.editSalesPlan.merchName = salesPlan.merchName
      this.editSalesPlan.yardName = salesPlan.yardName
      this.editSalesPlan.yardCode = salesPlan.yardCode
      this.editSalesPlan.reseDays = salesPlan.reseDays
      this.editSalesPlan.startTime = salesPlan.startTime
      this.editSalesPlan.endTime = salesPlan.endTime
      this.editSalesPlan.dayNum = salesPlan.dayNum
      this.editSalesPlan.boradsTimes = salesPlan.boradsTimes
      this.editSalesPlan.definePeoples = salesPlan.definePeoples
      this.editSalesPlan.price = salesPlan.price
      this.editSalesPlan.imgStr = salesPlan.imgStr
      this.editSalesPlan.teamCumstoer=salesPlan.teamCumstoer
      this.editSalesPlan.teamDefine=salesPlan.teamDefine
      this.editSalesPlan.broadcastList=JSON.parse(salesPlan.broadcastList)
      this.editSalesPlan.stallItems=JSON.parse(salesPlan.stallItems)
      this.editSalesPlan.sellStart=salesPlan.sellStart
      this.editSalesPlan.sellTime=salesPlan.sellTime
      this.editSalesPlan.startType=salesPlan.startType
      this.editSalesPlan.sellDateUnit=salesPlan.sellDateUnit
      if(salesPlan.startShowTime!=null&&salesPlan.startShowTime!=''&&
        salesPlan.endShowTime!=null&&salesPlan.endShowTime!=''){
        this.allShowTime.push(salesPlan.startShowTime)
        this.allShowTime.push(salesPlan.endShowTime)
      }
      if(salesPlan.teamCumstoer!=null&&salesPlan.teamCumstoer!=''){
        this.openDiscount()
s      }
    },
    dataSucess(message) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success'
      });
    },
    dataFail(message) {
      this.$notify({
        title: '失败',
        message: message,
        type: 'error'
      });
    },
    closDisplay(){
      this.$emit("close");
    },
    submit() {
      if(this.allShowTime.length>=2){
        this.editSalesPlan.startShowTime=this.allShowTime[0]
        this.editSalesPlan.endShowTime=this.allShowTime[1]
      }
      this.$refs['editSalesPlan'].validate((valid) => {
        if (!valid) {
          return
        }
        this.axios.request({
          method: 'put',
          url: './tck/plan/ticketing-plan/update',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data:{
            uuid:this.uuid,
            code: this.editSalesPlan.code,
            tictName: this.editSalesPlan.tictName,
            tictCode: this.editSalesPlan.tictCode,
            info: this.editSalesPlan.info,
            salTp: this.editSalesPlan.salTp,
            salName: this.editSalesPlan.salName,
            merchUuid: this.editSalesPlan.merchUuid,
            merchName: this.editSalesPlan.merchName,
            yardName: this.editSalesPlan.yardName,
            yardCode: this.editSalesPlan.yardCode,
            reseDays: this.editSalesPlan.reseDays,
            startTime: this.editSalesPlan.startTime,
            endTime: this.editSalesPlan.endTime,
            dayNum: this.editSalesPlan.dayNum,
            price: this.editSalesPlan.price,
            teamCumstoer:this.editSalesPlan.teamCumstoer,
            teamDefine:this.editSalesPlan.teamDefine,
            broadcastList:JSON.stringify(this.editSalesPlan.broadcastList),
            stallItems:JSON.stringify(this.editSalesPlan.stallItems),
            startShowTime:this.editSalesPlan.startShowTime,
            endShowTime:this.editSalesPlan.endShowTime,
            sellStart:this.editSalesPlan.sellStart,
            startType:this.editSalesPlan.startType,
            sellTime:this.editSalesPlan.sellTime,
            sellDateUnit:this.editSalesPlan.sellDateUnit,
            surplusStock: '0',
            stock: '0'}
        }).then((response) => {
          this.tictObj = response.data
          this.dataSucess("编辑售票计划成功")
          this.editOut();
          this.editBoxShow = true
          this.editShow = true
        }).catch(error => {
          console.log(error)
          this.dataFail("编辑售票计划失败")
          this.info = '修改失败'
          this.infoShow = true
        })
      })
    },
    endProcessing() {
      this.info = this.info + '修改成功,两秒后关闭'
      this.infoShow = true
      setTimeout(() => {
        this.infoShow = false
        this.$emit('editState', false)
        this.cleanSalesPlan()
        this.info = ''
      }, 2000)
    },
    cleanSalesPlan() {
      this.editSalesPlan = {
        code: '',
        tictName: '',
        tictCode: '',
        info: '',
        salTp: '',
        salName: '',
        merchUuid: '',
        merchName: '',
        yardName: '',
        yardCode: '',
        reseDays: '',
        startTime: '',
        endTime: '',
        dayNum: '',
        price: '',
        imgStr: '',
        boradsTimes: '',
        teamCumstoer: '',
        definePeoples: ''
      }
    },
    editOut() {
      this.$router.push("/salesPlan")
    }
  }
}
</script>

<style scoped>

</style>
